<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <title>化妆品首页</title>
    <link href="css/index.css" type="text/css" rel="stylesheet" />
    <link href="css/base.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div id="app">
        <div class="banner">
            <!--头部-->
            <div class="top">
                <div class="logo"></div>
                <span></span>
                <div class="txt01">
                    <p>专注护肤行业<b>10年</b></p>
                    <p>我们只生产最高品质的护肤产品</p>
                </div>
                <div class="tel">
                    <p>服务咨询热线</p>
                    <b>400-888-2837</b>
                </div>
            </div>
            <div class="nav">
                <div class="nav_bg">
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><span></span><a href="product.html?series=0">产品中心</a></li>
                        <li><span></span><a href="brandIdea.html">理念</a></li>
                        <li><span></span><a href="addProduct.html">添加产品</a></li>
                        <li><span></span><a href="search.html">搜索</a></li>
                    </ul>
                    <div class="search">
                        <button class="s01" id="searchProduct" style="background-color: #077c2b; border: none; color: #fff; 
                        padding: 5px 10px; font-size: 14px; font-weight: bold;
                        box-shadow: 0 2px 4px rgba(0,0,0,.2);">点击搜索</button>
                        <input type="text" placeholder="请输入关键字" class="s02" id="searchContent"/><span></span>

                        <button id="login" onClick="logout()" style="background-color: #077c2b; border: none; color: #fff; 
                            padding: 5px 10px; font-size: 14px; font-weight: bold;
                            box-shadow: 0 2px 4px rgba(0,0,0,.2);">
                            退出账号
                        </button>
                        <button id="loginUser"
                            style="cursor: default; background-color: #077c2b; border: none; color: white; height: 25px;"><a href="login.html" style="color: white;">未登录</a></button>
                    </div>

                </div>
            </div>
        </div>

        <div class="customer">

            <div class="product">
                <ul>
                    <li>
                        <a href="#"><img src="images/index.jpg" style="width: 43vh;height:30vh"></a>

                        <big></big>
                        <p><a href="#">佰草集个人护理品</a></p>
                    </li>
                   
                </ul>
                <a href="javascript:"><i><span
                            class="curr"><b></b></span><span><b></b></span><span><b></b></span></i></a>
            </div>
            <div class="news">
                <span class="cur"><a href="javascript:">分类</a></span>
                <ul id="productSeries">
                    <li><a href="newsxq.html">2008年，化妆品国际化全新产品在国内上市</a></li>
                    <li><a href="newsxq.html">2011年4月，化妆品国第1000家门店正式开幕</a></li>
                    <li><a href="newsxq.html">2013年，化妆品新品太极丹新品亮相上海家化</a></li>
                    <li><a href="newsxq.html">2014年6月，化妆品携中国文化入侵巴黎</a></li>
                    <li><a href="newsxq.html">2013年，化妆品新品太极丹新品亮相上海家化</a></li>

                </ul>

            </div>
            <div class="CommentProduct">
                <span class="cur"><a href="javascript:">热门产品</a></span>
                <ul id="hotProductList">


                </ul>

            </div>
        </div>

        <div class="main01">
            <h2>
                <span></span>
                <div class="right">

                </div>
            </h2>

            <div class="goods">
                <!-- 产品中心 -->
                <ul>
                    <li v-for="product in productList">
                        <a :href="'productxq.html?id='+product.id"><img :src="'http://127.0.0.1:5501/webItemTest01/BeautyMakeup/images/product/'+product.imgSrc"
                                :alt="product.productName" style="width: 22vh; height: 17vh;" />
                            <p>{{product.productName}}</p>
                        </a>
                    </li>
                </ul>

            </div>
        </div>


        <div class="bottom">
            <div class="bb">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><span></span><a href="product.html?series=0">产品中心</a></li>
                    <li><span></span><a href="brandIdea.html">品牌理念</a></li>
                    <li><span></span><a href="addProduct.html">添加产品</a></li>
                    <li><span></span><a href="search.html">搜索产品</a></li>
                </ul>
            </div>
            <p>© 珺柚</p>
        </div>
    </div>
</body>
<script src="js/jquery.js"></script>
<script src="js/js.js"></script>
<script src="js/index.js"></script>
<script src="js/ajax.js"></script>
<script src="js/vue.js"></script>
<script src="./js/userIsLogin.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            count: 0,
            productList: [],
            hotProduct: [],
        },
        //网页一进来就调用
        created() {
            this.getProductCenter();
            this.getHotProduct();
            this.getSeries();
            //设置十秒刷新一次产品中心
            this.timer = setInterval(() => {
                this.getProductCenter();
            }, 10000);
        },
        // 方法全部写在这
        methods: {
            //获取产品中心模块数据
            getProductCenter() {
                ajax.get('/getProductCount?id=0', (data) => {
                    this.count = data.total;
                    this.getProductData();
                });
            },
            //获取产品数据---产品中心
            getProductData() {
                let randomIndex = Math.floor(Math.random() * this.count / 10);
                ajax.get('/getProductCenter?count=' + randomIndex * 10, (data) => {
                    this.productList = data.data;
                });
            },
            //获取热销产品数据
            getHotProduct() {
                ajax.get("/getHotProduct", (data) => {
                    console.log(data);
                    this.hotProduct = data.data;
                    for (let i = 0; i < data.data.length; i++) {
                        $("#hotProductList").append(`<li><a href="productxq.html?id=${this.hotProduct[i].id}">${this.hotProduct[i].introduction}</a></li>`);
                    }
                });
            },
            getSeries(){
                ajax.get("/getSeriesList",(data)=>{
                    console.log(data);
                    let htmlData = ``;
                    for(var i = 0; i < data.data.length; i++){
                        htmlData +=`
                        <li style="text-align:center ;"><a href="product.html?series=${data.data[i].id}">${data.data[i].seriesProduct}</a></li>
                        `;
                    }
                    $("#productSeries").html(htmlData);
                })
            }
        },
        beforeDestroy() {
            //清除定时任务
            clearInterval(this.timer);
        },
    })

</script>

</html>